import React from "react";
import {
    Text,
    TouchableOpacity,
    FlatList,
} from "react-native";
import styles from "./index.style";
import {useTheme} from "@/contexts/ThemeContext";

const emojiList: string[] = [
    '😀', '😁', '😂', '🤣', '😃', '😄', '😅', '😆',
    '😉', '😊', '😋', '😎', '😍', '😘', '🥰', '😗',
    '😙', '😚', '🙂', '🤗', '🤩', '🤔', '🤨', '😐',
    '😑', '😶', '🙄', '😏', '😣', '😥', '😮', '🤐',
    '😯', '😪', '😫', '🥱', '😴', '😌', '😛', '😜',
    '😝', '🤤', '😒', '😓', '😔', '😕', '🙃', '🤑',
    '😲', '☹️', '🙁', '😖', '😞', '😟', '😤', '😢',
    '😭', '😦', '😧', '😨', '😩', '🤯', '😬', '😰',
    '😱', '🥵', '🥶', '😳', '🤪', '😵', '🥴', '😠',
    '😡', '🤬', '😷', '🤒', '🤕', '🤢', '🤮', '🥳',
    '🥺', '🤠', '😇', '🤡', '👻', '💀', '☠️', '👽',
    '👋', '👍', '👎', '👏', '🙏', '💪', '🤝', '✌️'
];

interface BuiltInEmojiListProps {
    onSelectEmoji: (emoji: string) => void;
}

export default function BuiltInEmojiList({ onSelectEmoji }: BuiltInEmojiListProps) {
    const { colors } = useTheme();

    const renderEmojiItem = ({ item }: { item: string }) => (
        <TouchableOpacity
            style={styles.emojiButton}
            onPress={() => onSelectEmoji(item)}
        >
            <Text style={styles.emoji}>{item}</Text>
        </TouchableOpacity>
    );

    return <FlatList
        data={emojiList}
        keyExtractor={(_item, index) => index.toString()}
        numColumns={6}
        renderItem={renderEmojiItem}
        scrollEventThrottle={16}
        showsVerticalScrollIndicator={false}
        contentContainerStyle={{ paddingBottom: 10 }}
        style={styles.emojiList}
    />;
}
